<script setup>

import { ref,onMounted,reactive } from 'vue'
import axios from 'axios'
import OrderDetail from "@/views/OrderDetail.vue";


const state = reactive({
  orderStatus: {
    '0': '全部订单', '1': '待付款','2': '待发货', '3': '待收货',
    '4': '待评价', '5': '退款中','6': '售后中', '7': '已取消',
    '8': '已退货', '9': '已收货'
  },
  orders: [], //要显示的订单列表
  activeName: '0'
})


const handleClick = (tab)=> {
  console.log(tab.name);  //就是不同的状态0-9
  //查询不同的状态
  loadOrdersByStatus(tab.props.name);
}

//加载指定状态的订单
const loadOrdersByStatus = (status)=>{
  axios.get(`/order/loadOrdersByStatus?status=${status}`).then(resp => {
    state.orders = resp.data;
  })
}

onMounted(()=>{
  //加载全部订单
  loadOrdersByStatus('0');
})
</script>

<template>
  <div>
    <el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!--  显示所有订单的状态 -->
        <el-tab-pane :label="value" :name="key"
                     v-for="(value,key,index) in state.orderStatus" :key="index">
          <!-- 显示订单明细组件 -->
          <OrderDetail :orders="state.orders"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style scoped>

</style>
